<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Level_code_work</title>
    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/custom.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
                <!--   顶部部分   -->
    <div class="ui inverted basic segment">
        <div class="ui inverted text menu">
            <!--   Tenlogo部分  -->
            <div class="ui image">
                <img src="images/tenlogo.png" alt="/">
            </div>
            <!--   用户头像name部分  -->
           <div class="ui inverted circular segment">
               <img src="images/hou30.jpg" alt="/">
           </div>
            <div class="ui p">
                <p>admin</p>
            </div>

            <!--   Logout部分  -->
            <div class="right menu">
                <div class="item">
                    <button type="button" name="button" class="ui basic inverted circular red button" style="margin-left:-22px;">Logout</button>
                </div>
            </div>
        </div>
    </div>

                <!--   目录部分   -->
    <div class="ui three item menu">
        <a class="item">All</a>
        <a class="item">New</a>
        <a class="item active" style="background: #ffffff">Editor`s</a>
    </div>

                <!--   卡片部分   -->
    <div class="ui inverted new">
        <!--   卡片第一行部分   -->
        <div class="ui three column grid">
            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img1.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Ut unde numquam non nisi. <br></br></a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img2.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Nesciunt eligendi qui et si...<br></br></a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img3.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Quo accsantium commodi in...</a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>
        </div>

              <!--   卡片第二行部分   -->
        <div class="ui three column grid">
            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img4.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Deleniti laudantium cum occ...</a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img5.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Aliquid impedit et iure fug...<br></br></a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img6.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Corporis qui odio perferend...</a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>
        </div>

               <!--   卡片第三行部分   -->
        <div class="ui three column grid">
            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img7.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Molestiae cupiditate et ut...<br></br></a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img8.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Rem accusamus dicta repudia</a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui fluid card">
                    <div  class="image">
                        <img src="images/img9.jpg">
                    </div>
                    <div class="content">
                        <a class="header">Ad et voluptatibus qui. Nih...<br></br></a>
                    </div>
                    <div class="extra content">
                        <span><i class="unhide icon"></i><trans data-src="10k" data-dst="10k">10k |</trans></span>
                        <span><i class="checkmark icon"></i><trans data-src="10 people got it" data-dst="10 people got it">10 people got it</trans></span>
                    </div>
                </div>
            </div>
        </div>


             <!--  左右箭头部分   -->
        <div class="">
            <div class="ui two item menu">
                <div class="item">
                    <i class="arrow left red icon"></i>
                </div>
                <div class="item">
                    <i class="arrow right red icon"></i>
                </div>
            </div>
        </div>

    </div>
</body>
</html>